<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form">
       <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="选择需识别图片"
          hasFeedback>
          <a-upload
            :action="uploadAction"
            listType="picture-card"
            :headers="headers"
            :fileList="fileList"
            @change="handleChange"
            @preview="handlePreview"
                :beforeUpload="beforeUpload"
          >
            <a-button>
              <a-icon type="upload"/>
              upload
            </a-button>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
            <img alt="example" style="width: 100%" :src="previewImage"/>
          </a-modal>

          <br/>
        </a-form-item>
      <a-form-item
        label="选择模板"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        :required="false"
        help="从列表中选择模板"
      >
            <a-select placeholder="请选择模板" :value="tempId" @change="handleInput">
            <a-select-option value="">请选择模板</a-select-option>
            <a-select-option value="4cbf2b5333ce3b3d1089f1dda30f7f7c">银行回执单</a-select-option>
            <a-select-option value="47b88326a52d0b7887318758e6b1823a">保险单明细</a-select-option>
            <a-select-option value="bf8ca1799985d3b760f2cbe223e1cca6">加油对账单</a-select-option>
            </a-select>
      </a-form-item>
      <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        style="text-align: center"
      >
        <a-button @click="handleSubmit" style="margin-left: 8px">开始识别</a-button>
      </a-form-item>
       <a-form-item 
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="识别结果"
          v-show="visibleResult">
          {{ result }}
        </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import { postAction, getAction } from '@/api/manage'
  export default {
    name: 'BaseForm',
    data () {
      return {
        description: '调用百度进行文字识别测试场-自定义模板。',
        value: 1,
        tempId: '',
        uploadAction:window._CONFIG['domianURL']+"/ocr/identify/upload",
        saveAction:window._CONFIG['domianURL']+"/ocr/identify/gettemp",
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        fileList: [],
        headers: {},
        previewVisible: false,
        previewImage: '',
        // form
        form: this.$form.createForm(this),
        visibleResult: false,
        result: ''
      }
    },
    methods: {
      handleInput(e) { 
        let val = e; 
        this.tempId = val;
      },
      handleChange(info) {
        this.fileList = info.fileList;
        if (info.file.status === 'uploading') {
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          if (!response.success) {
            this.$message.warning(response.message);
          }
        }
      },
      handlePicCancel() {
        this.previewVisible = false
        this.previewImage=''
      },
      handlePicView(url){
        this.previewImage = this.url.imgerver + "/" + url
        this.previewVisible = true
      },
      handlePreview(file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
        beforeUpload (file) {
          console.log(file);
        const isJPG = file.type === 'image/jpeg'
        if (!isJPG) {
            this.$message.error('只能上传JPG文件!')
        }
        const isLt2M = file.size / 1024 / 1024 < 4
        if (!isLt2M) {
            this.$message.error('图片必须小于4MB!')
        }
        const isSize = new Promise(function(resolve, reject) {
                            let width = 4096;
                            let height = 4096;
                            let _URL = window.URL || window.webkitURL;
                            let img = new Image();
                            img.onload = function() {
                                    let valid = img.width <= width && img.height <= height;
                                    valid ? resolve() : reject();
                            }
                            img.src = _URL.createObjectURL(file);
                    }).then(() => {
                            return file;
                    }, () => {
                            this.$message.error('上传的图片宽高必须小于是4096*4096!');
                            return Promise.reject();
                    }); 
        return isJPG && isLt2M && isSize
        },
      // handler
      handleSubmit () { 
        var that = this;
        if(this.tempId == "") {
            this.$message.warning('请选择模板');
        }

        let uploadFiles = this.fileList
        let path = ''
        if(!uploadFiles || uploadFiles.length==0){
            this.$message.warning('请选择需识别图片');
        }
        let formData = {};
        formData.tempId = this.tempId;
        formData.dbpath = this.fileList[0].response.message;
        console.log(formData);
        postAction(this.saveAction, formData).then((res) => {
            if (res.success) {
                console.log(res.message);
                that.$message.success(res.message);
                that.visibleResult = true;
                that.result = JSON.stringify(res.result);
                that.$emit('ok');
            } else {
                that.$message.warning(res.message);
            }
        }).finally(() => {
        })
      }
    }
  }
</script>